<template>
  <div>
    <div class="header">实验室管理模块 >> 实验室信息管理 >> 更多操作</div>
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="16">
        <div class="form">
          <div class="title">修改实验室</div>
          *实验室号:
          <el-input
            class="input"
            v-model="laboratoryRef.name"
            placeholder="请输入实验室号"
          ></el-input>
          <br />
          <br />
          *实验室人数(最大70人)：
          <el-input-number
            v-model="laboratoryRef.number"
            :min="1"
            :max="70"
            label="描述文字"
          ></el-input-number>
          <br />
          <br />
          描述信息:
          <br />
          <el-input
            v-model="laboratoryRef.description"
            type="textarea"
            :rows="3"
            placeholder="请输入描述信息"
          ></el-input>
          <br />
          <br />
          <div class="btn-container">
            <el-button
              type="primary"
              round
              @click="modifyLaboratory"
              :disabled="disabled"
            >
              修改信息
            </el-button>
            <el-button @click="deleteLaboratory" type="danger" round>
              删除实验室
            </el-button>
          </div>
        </div>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Laboratory } from "@/datasource/Type";
import { useStore } from "vuex";
import { defineComponent, ref, watch } from "vue";
import { State } from "@/store";
import { DELETE_LABORATORY, MODIFY_LABORATORY } from "@/store/VuexTypes";
import { ElMessageBox } from "element-plus";

export default defineComponent({
  props: {
    lid: String,
  },
  setup(props) {
    const laboratoryList = sessionStorage.getItem("laboratoryList");
    const laboratory: Laboratory = {
      name: "",
      number: 50,
      description: "",
    };
    const laboratoryRef = ref<Laboratory>(laboratory);
    if (laboratoryList) {
      console.log(JSON.parse(laboratoryList));
    }

    if (laboratoryList) {
      JSON.parse(laboratoryList).forEach((element: Laboratory) => {
        if (element.id == props.lid) {
          laboratoryRef.value = element;
        }
      });
    }
    const disabled = ref(false);
    const store = useStore<State>();
    //const teacher_userName = computed(() => store.state.teacher_userName);
    //const teacher_password = computed(() => store.state.teacher_password);
    const modifyLaboratory = () => {
      ElMessageBox.confirm("此操作将修改该实验室信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch(MODIFY_LABORATORY, {
            id: props.lid,
            name: laboratoryRef.value.name,
            number: laboratoryRef.value.number,
            description: laboratoryRef.value.description,
          });
        })
        .catch(() => {
          //这是注释哟
        });
    };
    const deleteLaboratory = () => {
      ElMessageBox.confirm("此操作将永久删除该实验室, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          store.dispatch(DELETE_LABORATORY, laboratoryRef.value.id);
        })
        .catch(() => {
          //这是注释哟
        });
    };
    watch(laboratoryRef.value, () => {
      if (laboratoryRef.value.name) {
        if (laboratoryRef.value.name.trim().length > 0) {
          disabled.value = false;
        } else {
          disabled.value = true;
        }
      } else {
        disabled.value = true;
      }
    });
    return {
      laboratoryRef,
      modifyLaboratory,
      deleteLaboratory,
      disabled,
    };
  },
});
</script>

<style scoped>
.header {
  width: 90%;
  padding: 5px 5px 10px;
  border-bottom: 1px solid #ccc;
  font-size: 12px;
  color: grey;
  margin-bottom: 20px;
}
.title {
  margin: 10px auto 30px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}
.form {
  padding: 50px 100px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.input {
  width: 300px;
}
.tips {
  color: #ccc;
  font-size: 14px;
}
.btn-container {
  display: flex;
  justify-content: center;
}
.btn {
  width: 200px;
}
</style>
